<template>
  <div class="app-container">
    <list-page
      :total="total"
      v-model:page-num="searchForm.pageNum"
      v-model:page-size="searchForm.pageSize"
      @getList="getList">
      <template #search>
        <list-search v-model="searchForm" @search="search">
          <el-form-item label="岗位编码" prop="like.pos_key">
            <el-input v-model="searchForm.like.pos_key" placeholder="请输入岗位编码" clearable @keyup.enter="search" />
          </el-form-item>
          <el-form-item label="岗位名称" prop="like.name">
            <el-input v-model="searchForm.like.name" placeholder="请输入岗位名称" clearable @keyup.enter="search" />
          </el-form-item>
          <el-form-item label="状态" prop="where.status">
            <el-select v-model="searchForm.status" placeholder="岗位状态" clearable class="w-100px">
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </list-search>
      </template>

      <template #actions>
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPerm="['system:post:add']">新增</el-button>
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="ids.length !== 1"
          @click="handleEdit"
          v-hasPerm="['system:post:edit']">
          修改
        </el-button>
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="!ids.length"
          @click="handleDelete"
          v-hasPerm="['system:post:delete']">
          删除
        </el-button>
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPerm="['system:post:export']">
          导出
        </el-button>
      </template>

      <el-table v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" prop="id" width="60" />
        <el-table-column label="岗位编码" align="center" prop="pos_key" />
        <el-table-column label="岗位名称" align="center" prop="name" />
        <el-table-column label="岗位排序" align="center" prop="list_sort" />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="create_time" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" class-name="small-padding">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)" v-hasPerm="['system:post:edit']">
              修改
            </el-button>
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPerm="['system:post:delete']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </list-page>

    <post-form v-model="formShow" :module-name="moduleName" :row="formData" @submit="getList" v-if="formShow" />
  </div>
</template>

<script setup name="Post">
  import { listPostApi, delPostApi, exportPostApi } from '@/api/system/post'
  import PostForm from './form.vue'

  const { proxy } = getCurrentInstance()
  const data = reactive({
    moduleName: '岗位',
    loading: false,
    listData: [],
    total: 0,
    formData: null,
    formShow: false,
    ids: [],
    searchForm: {
      pageNum: 1,
      pageSize: 10,
      orderByColumn: undefined,
      orderBySort: undefined,
      where: { status: undefined },
      like: { pos_key: undefined, name: undefined }
    }
  })

  const { moduleName, loading, listData, total, formData, formShow, ids, searchForm } = toRefs(data)
  const { sys_normal_disable } = proxy.useDict('sys_normal_disable')

  onMounted(() => {
    getList()
  })

  // 获取列表
  function getList() {
    loading.value = true
    listPostApi(searchForm.value).then(res => {
      listData.value = res?.list || []
      total.value = res?.total || 0
      loading.value = false
    })
  }

  // 搜索
  function search() {
    searchForm.value.pageNum = 1
    getList()
  }

  // 新增
  function handleAdd() {
    formData.value = null
    formShow.value = true
  }

  // 编辑
  function handleEdit(row) {
    const editId = row?.id || (ids.value.length ? ids.value[0] : '')
    if (!editId) return proxy.$modal.msgWarning('参数缺失')
    formData.value = { id: editId }
    formShow.value = true
  }

  // 删除
  function handleDelete(row) {
    const delIds = row?.id || ids.value.join(',')
    if (!delIds) return proxy.$modal.msgWarning('未选择数据')
    proxy.$modal
      .confirm('是否确认删除' + moduleName.value + '编号为"' + delIds + '"的数据项?')
      .then(() => {
        return delPostApi(delIds)
      })
      .then(() => {
        getList()
        proxy.$modal.msgSuccess('删除成功')
      })
  }

  // 列表选择复选框
  function handleSelection(selection) {
    ids.value = selection.map(item => item.id)
  }

  function handleExport() {
    exportPostApi(searchForm.value)
  }
</script>
